<template>
  <section class="contSty">
    <el-dialog :visible="senderVisible"
               :before-close="close"
               title="新增发货方"
               width="600px"
               top="20vh"
               :close-on-click-modal="false"
               append-to-body>
      <el-form ref="ruleForm"
               :model="form"
               label-width="80px"
               label-position="right"
               size="small"
               :rules="rules">
        <el-row>
          <el-form-item label="发货方"
                        prop="name">
            <el-input v-model="form.name"
                      maxlength="50" />
          </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="联系人"
                          prop="contactName">
              <el-input v-model="form.contactName"
                        maxlength="20" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话"
                          prop="contactMobile">
              <el-input v-model="form.contactMobile"
                        maxlength="50" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer">
        <el-button type="default"
                   @click="close">取消</el-button>
        <el-button type="primary"
                   :loading="loading"
                   @click="container">确定</el-button>
      </div>
    </el-dialog>
  </section>
</template>

<script>
import { customer } from "@/api/index";
export default {
  name: "AddSender",
  props: {
    senderVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      rules: {
        name: [{ required: true, message: "请输入发货方名称", trigger: "blur" }],
        contactName: [{ required: true, message: "请输入发货联系人", trigger: "blur" }],
        contactMobile: [{ required: true, message: "请输入联系电话", trigger: "blur" }],
      },
      form: null,
      loading: false
    };
  },
  created () {
    this.init();
  },
  methods: {
    init () {
      this.form = {
        name: null,
        contactName: null,
        contactMobile: null
      }
    },
    close () {
      this.init();
      this.$emit("update:senderVisible", false);
    },
    container () {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.add();
        }
      });
    },
    async add () {
      this.loading = true;
      let { data } = await customer.insert(this.form).catch(err => {
        this.loading = false;
      });
      this.loading = false;
      this.$message.success("新增发货方成功");
      this.init();
      this.$emit("refresh")
      this.$emit("update:senderVisible", false);
    }
  }
};
</script>
<style lang="scss" scoped>
.contSty {
  min-height: 200px;
  max-height: 408px;
  overflow-x: hidden;
}
.totalSty {
  color: var(--prev-color-primary) !important;
}
</style>
